<template>
  <image
    class="iconfont-action"
    @click="onChangeLike"
    :src="
      isLike
        ? 'https://cdn.xmxiaomai.com/isong_static/music/Group%2019.png'
        : props.isFull
        ? 'https://cdn.xmxiaomai.com/isong_static/music/%E7%82%B9%E8%B5%9E.png'
        : 'https://cdn.xmxiaomai.com/isong_static/music/%E8%B5%9E.png'
    " />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
// 接口
import api from '@/api';
import { Toast } from '@/utils/util';

const props = defineProps({
  status: {
    type: Boolean,
    default: false,
  },
  // 音乐id
  musicId: {
    type: Number,
  },
  isFull: {
    type: Boolean,
    default: false,
  },
});
const isLike = ref(props.status);

// 点赞
function onChangeLike() {
  const _isLike = !isLike.value;
  isLike.value = _isLike;
  fetchHandleLike(_isLike);
}

watch(
  () => props.status,
  newVal => {
    isLike.value = newVal;
  }
);

/**
 * 接口相关
 */
// 点赞/取消点赞
const fetchHandleLike = async (isLike: boolean) => {
  try {
    await api.Music.handleLikes({
      id: props?.musicId || -1,
      isLike,
    });
    Toast(isLike ? '点赞成功' : '取消点赞成功');
  } catch (e) {}
};
</script>

<style scoped lang="scss">
.iconfont-action {
  display: block;
  width: 40rpx;
  height: 40rpx;
}
</style>
